<template>
  <div class="study">
    <div class="container">
      <div class="title_con">
        <div class="title">
          <div class="title_desc">计划表</div>
          <el-button class="add" type="primary" icon="el-icon-plus" circle @click="dialog = true"></el-button>
          <el-drawer
            class="drawer"
            title="计划表"
            :visible.sync="dialog"
            direction="btt"
            size="60%"
            style="font-size: 16px;"
            ref="drawer">
            <div class="drawer_content">
              <el-form :model="form">
                <el-form-item label="计划" :label-width="formLabelWidth" class="label">
                  <el-input class="wid" v-model="form.name" autocomplete="off" clearable></el-input>
                </el-form-item>
              </el-form>
              <div class="drawer_footer">
                <el-button @click="cancelForm">取 消</el-button>
                <el-button type="primary" @click="handleClose" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
              </div>
            </div>
          </el-drawer>
          <div class="time" @click="click()">{{nowDate}}</div>
          <div class="digit">完成数量：{{digit[1]}} 暂停数量：{{digit[-1]}} 未开始数量：{{digit[0]}}</div>
        </div>
      </div>
      <learn-list ref="data"></learn-list>
    </div>
  </div>
</template>

<script>
import learnList from './learnList'
import axios from 'axios'
import Qs from 'qs'
export default {
  inject: ['reload'],
  name: 'studyMain',
  components: {
    learnList
  },
  data () {
    return {
      dialog: false,
      loading: false,
      form: {
        name: ''
      },
      formLabelWidth: '5rem',
      timer: null,
      value: '',
      nowDate: '', // 获取当前时间
      digit: {}
    }
  },
  mounted () {
    this.currentTime()
    axios({
      method: 'post',
      url: '/api/planCount'
    }).then(res => {
      this.digit = res.data
      // console.log(this.digit, 'digit')
    })
  },
  created () {
    //   页面刷新时将state数据存储到localStorage中
    window.addEventListener('beforeunload', () => {
      this.storage()
    })
    console.log(localStorage.desc, 'this.$refs.data.desc')
  },
  // 离开此页面时将数据存入localStorage中
  beforeRouteLeave (to, form, next) {
    console.log(this.$refs.data.judge, 'fffda')
    if (this.$refs.data.judge === 1) {
      this.$confirm('离开该页面后，计时将会暂停')
        .then(_ => {
          this.timer = setTimeout(() => {
            this.storage()
            next()
            // 动画关闭需要一定的时间
            setTimeout(() => {
              this.loading = false
            }, 400)
          }, 500)
        })
        .catch(_ => {})
    } else {
      this.storage()
      next()
    }
  },
  methods: {
    click () {
      console.log(this.$refs.data.judge)
    },
    // 将数据储存在浏览器
    storage () {
      let stor = window.localStorage
      // 存储计时器的时间，小时，分，秒
      stor.setItem('timed', this.$refs.data.str)
      stor.setItem('h', this.$refs.data.h)
      stor.setItem('m', this.$refs.data.m)
      stor.setItem('s', this.$refs.data.s)
      stor.setItem('judge', this.$refs.data.judge)
      stor.setItem('desc', this.$refs.data.desc)
      console.log(stor['timed'], 'stor', stor['judge'], 'father')
    },
    currentTime () {
      setInterval(this.getTime, 500)
    },
    getTime () {
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var strDate = date.getDate()
      var minute = date.getMinutes()
      var hour = date.getHours()
      var second = date.getSeconds()

      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      if (hour >= 0 && hour <= 9) {
        hour = '0' + hour
      }
      if (minute >= 0 && minute <= 9) {
        minute = '0' + minute
      }
      if (second >= 0 && second <= 9) {
        second = '0' + second
      }
      this.nowDate = year + '-' + month + '-' + strDate + ' ' + hour + ':' + minute + ':' + second
    },
    handleClose (done) {
      if (this.loading) {
        return
      }
      console.log(this.form.name)
      this.$confirm('确定要提交计划吗？')
        .then(_ => {
          this.loading = true
          this.timer = setTimeout(() => {
            this.storage()
            axios({
              method: 'post',
              url: '/api/addPlan',
              data: Qs.stringify({plan: this.form.name})
            }).then(res => {
              console.log(res.data, 'hahahah')
              if (res.data === '添加成功') {
                // eslint-disable-next-line no-unused-expressions
                this.dialog = false
                this.form.name = ''
                this.reload()
                this.$message({
                  message: '添加成功',
                  type: 'warning'
                })
              } else if (res.data === '今日计划已经到上限啦，休息吧~~~') {
                this.$message({
                  message: '今日计划已经到上限啦，休息吧',
                  type: 'warning'
                })
                this.dialog = false
              } else {
                this.$message({
                  message: '表单提交失败，请检查是否登录',
                  type: 'warning'
                })
                this.dialog = false
              }
            })
            // 动画关闭需要一定的时间
            setTimeout(() => {
              this.loading = false
            }, 400)
          }, 2000)
        })
        .catch(_ => {})
    },
    cancelForm () {
      this.loading = false
      this.dialog = false
      this.form.name = ''
      clearTimeout(this.timer)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .study
    margin-top 4rem
    position relative
    .container
      position absolute
      width 60%
      height auto!important
      height 45rem
      min-height 45rem
      padding-bottom 4rem
      margin 0 9rem
      .title_con
        heigth 7rem
        .title
          // position fixed
          background-color white
          width 100%
          height 7rem
          line-height 6rem
          font-size 2rem
          text-align center
          border-bottom .01rem solid #909399
          z-index 9
          .add
            position absolute
            right 0
            top .5rem
            margin 1.1rem 3rem 0 0
          .time
            position absolute
            left 2%
            top 3.3rem
            font-size 1rem
          .digit
            position absolute
            right 2%
            top 3.3rem
            font-size 1rem
          .drawer
            // 消除drawer标题的蓝框
            /deep/ :focus
              outline 0
            .drawer_content
              width 80%
              margin 0 auto
              .wid
                width 70rem
</style>
